<template>
    <div class="running-water-wrapper">
      <el-row type="flex" justify="space-between">
        <el-col :span="12"><div class="">提现流水信息</div></el-col>
        <el-col :span="12"><el-button type="primary" @click="refResh" class="fr">刷新</el-button></el-col>
      </el-row>
      <el-row type="flex">
        <el-table :data="[tableData]">
          <el-table-column label="用户余额" prop="" align="center">
            <template slot-scope="{row}">
              {{row.balance | currency}}
            </template>
          </el-table-column>
          <el-table-column label="流水需求" prop="" align="center">
            <template slot-scope="{row}">
              {{row.requireAmount | currency('', 2, {type: 2})}}
            </template>
          </el-table-column>
          <el-table-column label="已完成流水" prop="" align="center">
            <template slot-scope="{row}">
              {{row.validBalance | currency('', 2, {type: 2})}}
            </template>
          </el-table-column>
          <el-table-column label="剩余流水" prop="" align="center">
            <template slot-scope="{row}">
              {{row.leftAmount | currency('', 2, {type: 2})}}
            </template>
          </el-table-column>
          <el-table-column label="流水开始统计时间" prop="" align="center">
            <template slot-scope="{row}">
              {{row.lastRecharge | toTime}}
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row type="flex" justify="space-between">
        <p>流水需求明细</p>
      </el-row>
      <el-row>
        <el-form :inline="true" ref="conditionsSetForm" :rules="rules" :model="form">
          <el-form-item label="账变时间" prop="rangeTime">
            <el-date-picker
              v-model="form.rangeTime"
              type="datetimerange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              :default-time="['00:00:00', '23:59:59']"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerDayStep">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="操作单号">
            <el-input v-model="form.orderNo" placeholder="请输入操作单号" @keyup.enter.native="submitFilterForm"></el-input>
          </el-form-item>
          <el-form-item label="流水需求变动类型">
            <el-select v-model="form.type" clearable placeholder="请选择" multiple :collapse-tags="true">
              <el-option
                v-for="item in form.changeType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作人">
            <el-input v-model="form.operator" placeholder="请输入操作人" @keyup.enter.native="submitFilterForm"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.status" clearable placeholder="请选择">
              <el-option
                v-for="item in form.statusArray"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-button @click="submitFilterForm" type="primary">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row type="flex">
        <el-col :span="24">
          <el-button v-if="roleCheck('empty-running-water')" class="fr margin-left10" type="primary" @click="showDialog('流水清零',3)">流水清零</el-button>
          <el-button v-if="roleCheck('adjust-running-water')" class="fr" type="primary" @click="showDialog('调整流水',0)">调整流水</el-button>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-table :data="runningWaterDetail.list"  :row-class-name="tableRowClassName">
          <el-table-column label="流水需求变动时间" prop="" align="center">
            <template slot-scope="{row}">
              {{row.createTime|parseTime}}
            </template>
          </el-table-column>
          <el-table-column label="操作单号" prop="orderId" align="center"></el-table-column>
          <el-table-column label="流水需求变动类型" prop="" align="center">
            <template slot-scope="{row}">
              {{getChangeTypeName(row)}}
            </template>
          </el-table-column>
          <el-table-column label="细分类型" prop="" align="center">
            <template slot-scope="{row}">
              {{findSubType(row)}}
            </template>
          </el-table-column>
          <el-table-column label="账变金额" prop="amount" align="center">
            <template slot-scope="{row}">
              {{row.amount | formatAmount}}
            </template>
          </el-table-column>
          <el-table-column label="流水倍数" prop="magnificationFactor" align="center">
            <template slot-scope="{row}">
              {{[3,4,5,6].includes(row.type)?'定额流水' : ([8,9,10].includes(row.type)?'-' : row.magnificationFactor)}}
            </template>
          </el-table-column>
          <el-table-column label="单笔流水需求" prop="singleBettingDesire" align="center">
            <template slot-scope="{row}">
              {{row.singleBettingDesire | formatAmount}}
            </template>
          </el-table-column>
          <el-table-column label="总流水需求" prop="totalBettingDesire" align="center">
            <template slot-scope="{row}">
              {{row.totalBettingDesire | formatAmount}}
            </template>
          </el-table-column>
          <el-table-column label="变动前剩余流水" prop="leftBettingDesireBefore" align="center">
            <template slot-scope="{row}">
              {{row.leftBettingDesireBefore | formatAmount}}
            </template>
          </el-table-column>
          <el-table-column label="变动后剩余流水" prop="leftBettingDesireAfter" align="center">
            <template slot-scope="{row}">
              {{row.leftBettingDesireAfter | formatAmount}}
            </template>
          </el-table-column>
          <el-table-column label="操作人" prop="operator" align="center"></el-table-column>
          <el-table-column label="备注" prop="remark" align="center"></el-table-column>
          <el-table-column label="状态" prop="" align="center">
            <template slot-scope="{row}">
              {{row.type===8||row.type===9||row.type===10?'正常':statusObj[row.status]}}
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="" align="center">
            <template slot-scope="{row}">
              <!--<span v-if="row.status==2||row.status==3">-</span>-->
              <el-button v-if="row.status==0&&roleCheck('recover-running-water')" @click="showDialog('恢复流水',1,row.orderId)" type="text">
                恢复
              </el-button>
              <el-button v-else-if="row.status==1&&row.type!=8&&row.type!=9&&row.type!=10&&row.type!=13&&roleCheck('remove-running-water')" @click="showDialog('清除流水',2,row.orderId)" type="text">
                清除
              </el-button>
              <span v-else>-</span>
            </template>

          </el-table-column>

        </el-table>
      </el-row>
      <el-row>
        <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                       :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                       :layout="gridLayout" :total="runningWaterDetail.total">
        </el-pagination>
      </el-row>
      <!--流水详情-->
      <el-dialog :title="dialogTitle" :visible.sync="operateDialogFlag" append-to-body width="20%">
        <run-water-operate-dialog @refResh="refResh" @getAllBind="getAllBind"  v-if='operateDialogFlag' :userId="runningWaterRow.id" :operateType="operateType" :orderNo="orderNo" v-model="operateDialogFlag"/>
      </el-dialog>
    </div>
</template>

<script>
import { grid, pickerOption, form } from '@/build';
import {
  getMenberRunningWaterDetail,
  getMemberWithDraw,
} from '@/services/api/member';
import EditDialog from '@/views/member/list/editDialog';
import runWaterOperateDialog from '@/views/member/detail/runWaterOperateDialog';

export default {
  name: 'runningWaterInfo',
  components: { EditDialog, runWaterOperateDialog },
  mixins: [grid, pickerOption, form],
  props: ['runningWaterRow'],
  data() {
    const monthTime = [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')];
    return {
      // monthTime: [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')],
      tableData: {},
      operateDialogFlag: false,
      dialogTitle: '',
      operateType: '',
      orderNo: '',
      runningWaterData: [],
      runningWaterDetail: {
        total: 0,
        list: [],
      },
      statusObj: {
        0: '已清除',
        1: '正常',
        2: '清除审核中',
        3: '恢复审核中',
      },
      filters: {
        uid: this.runningWaterRow.id || this.$store.state.member.member_id,
        startDate: monthTime[0],
        endDate: monthTime[1],
        orderNo: '',
        type: [],
        operator: '',
        status: '',
        page: 1,
        size: 20,
      },
      form: {
        rangeTime: monthTime,
        orderNo: '',
        type: [],
        operator: '',
        status: '',
        statusArray: [{
          value: -1,
          label: '全部',
        }, {
          value: 0,
          label: '已清除',
        }, {
          value: 1,
          label: '正常',
        }, {
          value: 2,
          label: '清除审核中',
        }, {
          value: 3,
          label: '恢复审核中',
        }],
        changeType: [{
          label: '充值',
          value: 1,
        }, {
          label: '上分',
          value: 2,
        }, {
          label: '加币-红包（计入红利）',
          value: 3,
        }, {
          label: '加币-活动红利（计入红利）',
          value: 4,
        }, {
          label: '加币-财务部加币（不计红利）',
          value: 5,
        }, {
          label: '加币-代理部加币（不计红利）',
          value: 6,
        }, {
          label: '活动红利-返水活动 ',
          value: 7,
        }, {
          label: '清除流水',
          value: 8,
        }, {
          label: '恢复流水',
          value: 9,
        }, {
          label: '调整流水',
          value: 10,
        }, {
          label: '加币-计入红利',
          value: 11,
        }, {
          label: '加币-不计红利',
          value: 12,
        }, {
          label: '流水清零',
          value: 13,
        },
        {
          label: 'VIP生日礼金',
          value: 14,
        }, {
          label: 'VIP月度礼金',
          value: 15,
        }, {
          label: 'VIP升级礼金',
          value: 16,
        }],
      },
      ids: [],
      rules: {
        rangeTime: [
          { required: true, message: '请选择时间', trigger: 'blur' },
        ],
      },
    };
  },
  mounted() {
    this.bindServices();
    this.getAll();
  },
  computed: {
    subType() {
      let subType = [];
      _.each(consts.TYPES_DETAIL_VIP, (item) => {
        subType = subType.concat(item.children);
      });
      return subType;
    },
  },
  methods: {
    getChangeTypeName(row) {
      return _.find(this.form.changeType, { value: row.type }) ? _.find(this.form.changeType, { value: row.type }).label : '-';
    },
    findSubType(row) {
      return _.find(this.subType, { value: row.subType }) ? _.find(this.subType, { value: row.subType }).label : '-';
    },
    tableRowClassName({ row }) {
      if (row.leftBettingDesireBefore === 0) {
        return 'success-row';
      }
      return '';
    },
    submitFilterForm() {
      if (!this.form.rangeTime) {
        this.$notify({
          title: '请选择时间',
          type: 'error',
          duration: 2000,
        });
        return;
      }
      this.filters.startDate = this.form.rangeTime[0];
      this.filters.endDate = this.form.rangeTime[1];

      this.filters.orderNo = this.form.orderNo;
      this.filters.type = this.form.type.join(',');
      this.filters.operator = this.form.operator;
      this.filters.status = this.form.status;

      this.gridSearch();
    },
    showDialog(title, type, params) {
      this.operateType = type;
      this.dialogTitle = title;
      this.orderNo = params;
      this.operateDialogFlag = true;
    },
    refResh() {
      const monthTime = [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')];
      this.form.rangeTime = monthTime;
      this.form.orderNo = '';
      this.form.type = [];
      this.form.operator = '';
      this.form.status = '';

      this.filters = {
        uid: this.runningWaterRow.id || this.$store.state.member.member_id,
        startDate: monthTime[0],
        endDate: monthTime[1],
        orderNo: '',
        type: '',
        operator: '',
        status: '',
        page: 1,
        size: 20,
      };
      this.getAll();
    },
    getAllBind() {
      this.getAll();
    },
    bindServices() {
      this.bindGet(getMenberRunningWaterDetail, 'runningWaterDetail', {
        action: 'getGrid',
        sendingData: 'filters',
      });
      this.bindGet(getMemberWithDraw, 'tableData', {
        action: 'getMemberWithDraw',
        sendingData: { userId: this.runningWaterRow.id || this.$store.state.member.member_id },
      });
    },
  },
  filters: {
    formatAmount(data) {
      // return _.currency(Math.ceil(data * 100) / 100);
      return _.currency(data, '', 2, { type: 2 });
    },
  },
};
</script>

<style>
  .running-water-wrapper .el-table .success-row {
    background: #40d62c;
  }
  .margin-left10{
    margin-left: 10px;
  }
</style>
